<template>
	<view>
		<uni-collapse @change="change">
			<uni-collapse-item>
				<template v-slot:title>
					<uni-search-bar
						ref="searchRef"
						:placeholder="titleMap.label"
						@input="input($event, titleMap)"
						clearButton="auto"
						cancelButton="auto"
						@cancel="cancel($event, titleMap)"
						@clear="clear($event, titleMap)"
					></uni-search-bar>
				</template>
				<uni-search-bar
					ref="searchRef"
					@input="input($event, item)"
					:placeholder="item.label"
					clearButton="always"
					cancelButton="auto"
					@cancel="cancel($event, item)"
					@clear="clear($event, item)"
					:key="index"
					v-for="(item, index) in searchList"
				></uni-search-bar>
				<view class="datePicker" v-for="(item, index) in searchDateList" :key="index">
					<uni-datetime-picker
						range-separator="至"
						v-model="item.dateValue"
						return-type="string"
						:placeholder="item.label"
						@change="changeDate($event, item)"
					></uni-datetime-picker>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
import { debounce } from '@/utils/utils.js';
export default {
	name: 'dil-search',
	data() {
		return {
			searchMap: {},
			searchList: [],
			titleMap: {},
			collapseValue: [],
			searchDateList: []
		};
	},
	props: {
		columnData: {
			default() {
				return [];
			}
		}
	},
	mounted() {
		this.updateSearchList();
		this.emitSearchMapDebounce = debounce(() => {
			this.emitSearchMap();
		}, 300);
		uni.$on('onShow', (data) => {
			//监听页面onShow<br>
			if (this.searchMap && Object.keys(this.searchMap).length > 0) {
				setTimeout(() => {
					this.emitSearchMap();
				}, 300);
			}
		});
	},
	watch: {
		columnData() {
			this.updateSearchList();
		}
	},
	beforeDestroy() {
		//为了避免重复监听，在组件销毁前，关闭监听
		uni.$off('onShow');
	},
	methods: {
		emitSearchMap() {
			this.$emit('onSearch', this.searchMap);
		},
		changeDate(res, item) {
			this.searchMap[item.prop] = res;
			this.emitSearchMapDebounce();
		},
		input(res, item) {
			this.searchMap[item.prop] = res;
			console.log(res, 'res');
			this.emitSearchMapDebounce();
		},
		clear(res, item) {
			delete this.searchMap[item.prop];
			this.emitSearchMapDebounce();
		},
		cancel(res, item) {
			delete this.searchMap[item.prop];
			this.emitSearchMapDebounce();
		},
		updateSearchList() {
			this.searchDateList = [];
			this.searchList = this.columnData.reduce((prev, item) => {
				if (item.isFilter && item.titleType != 'title' && !item.label.includes('日期') && !item.label.includes('时间')) {
					prev.push(item);
				}
				if (item.titleType == 'title') {
					this.titleMap = item;
				}
				if (item.isFilter && item.titleType != 'title' && (item.label.includes('日期') || item.label.includes('时间'))) {
					this.searchDateList.push(item);
				}
				return prev;
			}, []);
		},
		change(collapseValue) {
			this.collapseValue = collapseValue;
			this.searchMap = {};
			this.emitSearchMapDebounce();
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .uni-date .uni-date-x {
	background-color: #f8f8f8;
}
/deep/ .uni-date .uni-date__x-input {
	color: #b3b3b3;
	margin-left: 5px;
}

.datePicker {
	margin-left: 20rpx;
	width: 95vw;
	margin-bottom: 40rpx;
}
</style>
